import React, { useState } from 'react'
import Header from '@c/header/Header'

import { Container, Containimg, Conimg } from './StyledPortrait'

import headimg from '@a/images/personal/椭圆2拷贝@2x.png'
import heading_1 from '@a/images/personal/图层 1.png'
import heading_2 from '@a/images/personal/图层 2.png'
import heading_3 from '@a/images/personal/图层 3.png'
import heading_4 from '@a/images/personal/图层4@2x.png'
import heading_5 from '@a/images/personal/图层5@2x.png'
import heading_6 from '@a/images/personal/图层6@2x.png'
import heading_7 from '@a/images/personal/图层7@2x.png'
import heading_8 from '@a/images/personal/图层8@2x.png'

import Check from '@a/images/personal/对号.png'

import { useHistory } from 'react-router-dom'


const Portrait = (props) => {
    console.log(props);
    let [state,setState] = useState({
        // title: ["沉稳", "和蔼", "睿智", "文艺", "无私", "阳光", "知性", "智慧"],
        uhead: props.location.state.uhead || headimg
    })
    let history = useHistory()

    const handlechangeClick = () => {
        history.push('/personalinfo', state)
    }

    const handleClick = (e) => {
        // console.log(e.target);
        setState({
            uhead: e.target.src
        })
    }

    return (
        <Container>
            <Header
                title="设置个人头像"
                onChangeClick={handlechangeClick}
            ></Header>
            <Containimg>
                <div>
                    <img src={state.uhead} alt="" />
                </div>
            </Containimg>

            <Conimg>
                <h1>全部头像</h1>
                <ul>
                    <li>
                        <div className="conimg">
                            <div className="portrait" onClick={handleClick}>
                                <img src={heading_1} alt="" />
                            </div>
                            <img className="check" src={Check} alt="" />
                        </div>
                        <span>沉稳</span>
                    </li>
                    <li>
                        <div className="conimg">
                            <div className="portrait" onClick={handleClick}>
                                <img src={heading_2} alt="" />
                            </div>
                            <img className="check" src={Check} alt="" />
                        </div>
                        <span>和蔼</span>
                    </li>
                    <li>
                        <div className="conimg">
                            <div className="portrait" onClick={handleClick}>
                                <img src={heading_3} alt="" />
                            </div>
                            <img className="check" src={Check} alt="" />
                        </div>
                        <span>睿智</span>
                    </li>
                    <li>
                        <div className="conimg">
                            <div className="portrait" onClick={handleClick}>
                                <img src={heading_4} alt="" />
                            </div>
                            <img className="check" src={Check} alt="" />
                        </div>
                        <span>文艺</span>
                    </li>
                    <li>
                        <div className="conimg">
                            <div className="portrait" onClick={handleClick}>
                                <img src={heading_5} alt="" />
                            </div>
                            <img className="check" src={Check} alt="" />
                        </div>
                        <span>无私</span>
                    </li>
                    <li>
                        <div className="conimg">
                            <div className="portrait" onClick={handleClick}>
                                <img src={heading_6} alt="" />
                            </div>
                            <img className="check" src={Check} alt="" />
                        </div>
                        <span>阳光</span>
                    </li>
                    <li>
                        <div className="conimg">
                            <div className="portrait" onClick={handleClick}>
                                <img src={heading_7} alt="" />
                            </div>
                            <img className="check" src={Check} alt="" />
                        </div>
                        <span>知性</span>
                    </li>
                    <li>
                        <div className="conimg">
                            <div className="portrait" onClick={handleClick}>
                                <img src={heading_8} alt="" />
                            </div>
                            <img className="check" src={Check} alt="" />
                        </div>
                        <span>智慧</span>
                    </li>
                </ul>
            </Conimg>
        </Container>
    )
}

export default Portrait